<template>
	<view class="question-list-page">
		<!-- 导航栏 -->
		<!-- <view class="nav-bar">
			<view class="back-btn" @click="goBack">
				<text class="back-text">返回</text>
			</view>
			<view class="title">{{ categoryTitle }}</view>
			<view class="right-icon">
				<image src="/static/personalCenter/details.png" mode="aspectFill"></image>
			</view>
		</view> -->

		<!-- 问题列表 -->
		<view class="question-container" v-if="questionCategories.length > 0">
			<view 
				class="question-item" 
				v-for="(item, index) in currentQuestions" 
				:key="item.id"
				@click="showAnswer(index)"
			>
				<view class="question-header">
					<text class="question-number">{{ index + 1 }}、</text>
					<text class="question-text">{{ item.title    }}</text>
					<image class="arrow-icon" src="/static/personalCenter/details.png" mode="aspectFill"></image>
				</view>
				<view class="answer-content" v-if="expandedIndex === index">
					<text class="answer-text">{{ item.content }}</text>
				</view>
			</view>
		</view>
		<view class="question-container" v-else>
			<empty-data :text="'暂无数据'"></empty-data>
		</view>

	</view>
</template>

<script>
export default {
	data() {
		return {
			category: '',
			categoryTitle: '',
			expandedIndex: -1,
			// 问题分类数据
			questionCategories: [],
		}
	},
	computed: {
		currentQuestions() {
			return this.questionCategories|| []
		}
	},
	onLoad(options) {
		this.category =  options.category // 5
		this.categoryTitle = options.title
        this.getQuestionList()
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},
        async getQuestionList() {
            const res = await this.$http.get(`/h5/helpCenter/list/${this.category}`)
            this.questionCategories = res.data.list || []
        },
		// 显示/隐藏答案
		showAnswer(index) {
			if (this.expandedIndex === index) {
				this.expandedIndex = -1
			} else {
				this.expandedIndex = index
			}
		},
	}
}
</script>

<style lang="scss" scoped>
.question-list-page {
	min-height: 100vh;
	background-color: #f5f5f5;
}

.nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #eee;
}

.back-btn {
	display: flex;
	align-items: center;
}

.back-text {
	color: #ff7937;
	font-size: 28rpx;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.right-icon image {
	width: 32rpx;
	height: 32rpx;
}

.question-container {
	padding: 20rpx 26rpx;
}

.question-item {
	background-color: #fff;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
}

.question-header {
	display: flex;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.question-number {
	font-size: 30rpx;
	color: #333;
	margin-right: 10rpx;
}

.question-text {
	flex: 1;
	font-size: 30rpx;
	color: #333;
}

.arrow-icon {
	width: 32rpx;
	height: 32rpx;
}

.answer-content {
	padding: 30rpx;
	background-color: #f9f9f9;
}

.answer-text {
	font-size: 28rpx;
	color: #666;
	line-height: 1.6;
}

.bottom-nav {
	position: fixed;
	bottom: 40rpx;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 40rpx;
}
</style> 